<extend name="Public/base"/>
<block name="body">
	<link rel="stylesheet" href="/static/backend/css/report.css">
	<link rel="stylesheet" href="/static/backend/plugins/layui/css/modules/layer/default/layer.css"  media="all">
	<script src="__BACKEND_STATIC__/plugins/echarts/echarts.js"></script>
	<div class="page-crumb">
		<div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">趋势报表</span></div>
	</div>
	<div class="ui-nav-tab">
		<a class="nav-item state-active" href="/report/adPosition" data-pjax>趋势报表</a>
	</div>
	<div class="layui-main">
		<div class="layui-form-item">
			<label class="layui-form-label">应用平台：</label>
			<div class="layui-input-inline">
				<select name="deliveryid" lay-verify="deliveryid" lay-filter="deliveryid" >
					<option value="">全部应用：</option>
					<foreach name="delivery" item="ret" key="k">
						<option value="{$ret.id}">{$ret.delivery_name}</option>
					</foreach>
				</select>
			</div>
			<div class="layui-input-inline">

				<select name="deliveryid" lay-verify="deliveryid" lay-filter="deliveryid">
					<option value="">全部广告位类型：</option>
					<option value="">640*100横幅</option>
					<option value="">640*200横幅</option>
					<option value="">插屏</option>
					<option value="">开屏</option>
					<option value="">分享墙</option>
					<option value="">信息流</option>
				</select>
			</div>
			<div class="layui-inline">
				<input class="layui-input" name="begin" placeholder="请选择开始时间"  value="{$data.begin}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
			</div>至
			<div class="layui-inline">
				<input class="layui-input" name="end" placeholder="请选择结束时间" value="{$data.end}"  onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
			</div>
			<button class="layui-btn layui-btn-min" lay-submit="" lay-filter="submit" id="trend_report">　　确定　　</button>
		</div>
	</div>
	<div id="main" style="width: 1673px;height:300px;">

	</div>
	<div class="layui-form-item">
		<div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">媒体广告数据</span></div>
	</div>

	<table class="layui-table list-content-table" lay-skin="nob">
		<colgroup>
			<col width="20">
			<col width="200">
			<col width="150">
			<col width="200">
			<col width="200">
			<col width="150">
			<col width="150">
			<col width="200">
			<col width="150">
			<col width="150">
		</colgroup>
		<thead class="list-table-head">
		<tr>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text ui-table-hcell-text-first">

				</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">时间</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">应用名称</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告位名称</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告位类型</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告请求数</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告返回量</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">展示数</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">点击数</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">点击率</div>
			</th>
		</tr>
		</thead>

		<tbody class="list-table-body" id="each">

		</tbody>
	</table>
	<script type="text/javascript">


	</script>


	<script>

	</script>
	<script>
        $(document).ready(function(){
            $.ajax({
                type:"get",
                url:'/DataReport/trend_report',
                dataType:"json",
                success: function(data){

                    if(data.status == '1') {

                        showEchart(data.data);

                        var str = '';
                        if(data.data.trend){
                            $.each(data.data.trend,function(index,item){
                                str += "<tr><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.date_time + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.apply_name + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+item.code_name+"</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.code_type + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.ad_requests + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" +item.ad_returns + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.union_view + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.union_click + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.union_click_rate + "%</div></td></tr>";

                            });
                            $('#each').append(str);
						}else{
                            str += "<tr><td class='ui-table-cell'>没有数据<div class='ui-table-cell-text'>  </div></td></tr>>";
						}


                    } else {
                     	console.log('没数据');
                    }
                    return false;
                }
            });
        });
        $("#trend_report").click(function () {
           var begin =$(" input[ name='begin' ] ").val();
           var  end  =$(" input[ name='end' ] ").val();
            $.ajax({
                type:"get",
                url:'/DataReport/trend_report',
                dataType:"json",
                data:{'begin':begin,'end':end},
                success: function(data){

                    if(data.status == '1') {

                        showEchart(data.data);

                        var str = '';
                        if(data.data.trend){
                            $.each(data.data.trend,function(index,item){
                                str += "<tr><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.date_time + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.apply_name + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+item.code_name+"</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.code_type + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.ad_requests + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" +item.ad_returns + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.union_view + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.union_click + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.union_click_rate + "%</div></td></tr>";

                            });
                            $('#each').empty();
                            $('#each').append(str);
                        }else{
                            str += "<tr><td class='ui-table-cell'>没有数据<div class='ui-table-cell-text'>  </div></td></tr>>";
                        }


                    } else {
                        console.log('没数据');
                    }
                    return false;
                }
            });
        });


       function showEchart(data) {

           var myChart = echarts.init(document.getElementById('main'));

           option = {

               tooltip : {

//                   formatter: function (params) {
//                       console.log(params);
//                       var str = params[0].name +"<br />";
//                       str += params[0].seriesName + ": " + params[0].value + "<br />";
//                       str += params[1].seriesName + ": " + params[1].value + "<br />";
//                       str += params[2].seriesName + ": " + params[2].value + "<br />";
//                       str += params[3].seriesName + ": " + params[3].value + "%<br />";
//                       return str;
//                   },

                   trigger: 'axis'

               },

               legend: {

                   data:['展现量','点击量','点击率(%)']


               },

               toolbox: {

                   show : true,

                   feature : {

                       mark : {show: true},

                       dataView : {show: true, readOnly: false},

                       magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

                       restore : {show: true},

                       saveAsImage : {show: true}

                   }

               },

               calculable : true,

               xAxis : [

                   {

                       type : 'category',

                       boundaryGap : false,

                       data:data.date_time

                   }

               ],

               yAxis : [

                   {

                       type : 'value',
                       splitLine:{
                           show:false
                       }

                   }

               ],

               series : [

                   {

                       name:'展现量',

                       type:'line',

                       smooth:true,

                       itemStyle: {
                           normal: {
                               color: '#40E0D0',
                               borderColor: 'rgba(64,224,208,0.27)',
                               borderWidth: 12

                           }
                       },
                       areaStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                   offset: 0,
                                   color: 'rgba(64,224,208, 0.3)'
                               }, {
                                   offset: 0.8,
                                   color: 'rgba(64,224,208, 0.3)'
                               }], false),
                               shadowColor: 'rgba(0, 0, 0, 0.1)',
                               shadowBlur: 10
                           }
                       },

                       data:data.union_view

                   },
                   {

                       name:'点击量',

                       type:'line',

                       smooth:true,

                       itemStyle: {
                           normal: {
                               color: '#EE82EE',
                               borderColor: 'rgba(238,130,238,0.27)',
                               borderWidth: 12

                           }
                       },
                       areaStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                   offset: 0,
                                   color: 'rgba(238, 130, 238, 0.3)'
                               }, {
                                   offset: 0.8,
                                   color: 'rgba(238, 130, 238, 0.3)'
                               }], false),
                               shadowColor: 'rgba(238, 130, 238, 0.1)',
                               shadowBlur: 10
                           }
                       },


                       data:data.union_click

                   },
                   {

                       name:'点击率(%)',

                       type:'line',

                       smooth:true,

                       itemStyle: {
                           normal: {
                               color: '#FFD770',
                               borderColor: 'rgba(255,215,0,0.27)',
                               borderWidth: 12

                           }
                       },
                       areaStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                   offset: 0,
                                   color: 'rgba(255,215,0, 0.3)'
                               }, {
                                   offset: 0.8,
                                   color: 'rgba(255,215,0, 0.3)'
                               }], false),
                               shadowColor: 'rgba(255,215,0, 0.1)',
                               shadowBlur: 10
                           }
                       },

                       data:data.union_click_rate
                   }

               ]


           };
           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       }
	</script>
</block>
<script src="__BACKEND_STATIC__/js/report/adPosition.js"></script>

